<template>
  <div class="dietDetails">
    <h1>
      <span @click="fun()" class="iconfont icon-zuojiantou"></span>
      <span class="iconfont icon-xiazai10"></span>
    </h1>
    <img :src="this.$route.query.xiaox.imgurl" alt="" />
    <h2>
      
      <p>{{this.$route.query.xiaox.titletext}}</p>
      <h6 class="text">
        <span ref="content">{{ this.$route.query.xiaox.text | filter }}</span> &nbsp;
        <span class="xiahuaxian" @click="funDown()" ref="click">继续阅读</span>
      </h6>
      <p>
        <span>适宜</span>
        <span>湿气重</span>
      </p>
    </h2>
    <div class="empty"></div>
    <h3 v-for="(v, i) in 3" :key="i">
      <p>
        <i>☆</i>
        适合湿气重的人食用
      </p>
      <p>
        山药补脾功效最佳。痰湿体质的人脾气受困，因脾喜燥恶湿。而脾本身又可以运化痰湿，所以祛痰湿除要考虑健脾补脾。可以在超市买干的山药片或者磨粉熬粥。
      </p>
    </h3>
    <h4>
      <p><i>☆</i> 为你推荐与山药相关的做法</p>
      <DietDetailList v-for="(v, i) in 3" :key="i" />
    </h4>
    <DietDetailYuan />
  </div>
</template>

<script>
import DietDetailList from "../components/dietDetailList.vue";
import DietDetailYuan from "../components/dietDetailYuan.vue";
export default {
  props:[],
  components: {
    DietDetailList,
    DietDetailYuan,
  },
  data() {
    return {
      text: "山药为薯渍科多年蔓生草本植物薯裁的根,山药为薯渍科多年蔓生草本植物薯裁的根,山药为薯渍科多年蔓生草本植物薯裁的根...,山药为薯渍科多年蔓生草本植物薯裁的根...",
    };
  },
  methods: {
    fun() {
      this.$router.push("/diet");
    },
    funDown(){
      this.$refs.content.innerHTML=this.$route.query.xiaox.text
      this.$refs.click.innerHTML="收起"
    }
  },
  filters: {
    filter(val) {
      if (val.length > 15) {
        return val.substr(0, 15) + "...";
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.empty {
  height: 0.1rem;
  background-color: rgb(228, 227, 227);
}
h4 p {
  height: 0.7rem;
  line-height: 0.8rem;
  padding: 0 0.2rem;
  font-size: 0.2rem;
  font-weight: 700;
}
h3 {
  padding: 0 0.2rem;
  min-height: 1.95rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-bottom: 0.01rem solid #999;
}
h3 p:nth-child(1) {
  font-size: 0.2rem;
  font-weight: 700;
  align-self: flex-start;
}
h2 {
  padding: 0 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height: 1.7rem;
}
h2 p:nth-child(1) {
  font-size: 0.2rem;
  font-weight: 700;
}
.xiahuaxian {
  text-decoration: underline;
  font-weight: 700;
}
h2 p:nth-child(3) {
  width: 100%;
  height: 0.46rem;
  line-height: 0.46rem;
  align-self: flex-start;
  border-top: 0.01rem solid #999;
}
h2 p:nth-child(3) span {
  padding: 0 0.1rem;
  margin: 0 0.1rem 0 0;
  border: 0.01rem solid green;
  color: green;
  border-radius: 0.05rem;
}
h2 p:nth-child(3) span:nth-child(1) {
  background-color: green;
  color: #fff;
}
h1 {
  position: fixed;
  top: 0;
  font-size: 0.36rem;
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h1 span {
  text-align: center;
  line-height: 0.38rem;
  width: 0.38rem;
  height: 0.38rem;
  background-color: #fff;
  opacity: 0.7;
  border-radius: 50%;
  margin: 0 0.2rem;
}
img {
  width: 100%;
  height: 2.25rem;
}
.text{
  margin: .2rem 0;
}
</style>